<template>
    <div class="auditBox">
        <div v-if="$route.path == '/sweepCodeCheck'">
            <div class="info" :class="{big: result&&result.type == 3}">
                <div class="name clearfix">
                    <div class="nameList">
                        <em class="patients" v-if="result.type == 1">患者</em>
                        <em class="family" v-if="result.type == 2">陪同家属</em>
                        <em class="staff" v-if="result.type == 3">本院人员</em>
                    </div>
                    <span>{{result.name}}</span>
                </div>
                <ul>
                    <li>
                        <div>手机号：</div>
                        <div>{{result.phone}}</div>
                    </li>
                    <li>
                        <div>身份证号：</div>
                        <div>
                            {{result.cardId}}
                        </div>
                    </li>
                    <li>
                        <div>住址：</div>
                        <div>{{result.address}}</div>
                    </li>
                    <li @click="accompany" v-if="result.type != 3" class="accompany">
                        <div v-if="result.type == 1">陪同家属</div>
                        <div v-if="result.type == 2">陪同患者</div>
                        <div class="num"><span>{{result.familyMember.length}}</span><i class="el-icon-arrow-right"></i>
                        </div>
                    </li>
                </ul>
            </div>
            <swiper :dots-position="'center'" class="swiper" :height="'4rem'">
                <swiper-item class="black" v-for="(list,index) in result.idCardImg" :key="index">
                    <el-image
                        fit="contain"
                        :src="'/_api' + list"
                        class="uploadimg"
                        @load="loadImage()"
                        preview>
                        <div slot="placeholder" class="image-slot">
                            <i class="el-icon-loading"></i>
                        </div>
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                </swiper-item>
            </swiper>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="1.5rem" :show-message="false"
                     :label-position="'top'" class="form clearfix">
                <!--                <div class="title">登记信息</div>-->
                <el-form-item label="出入状态" prop="state">
                    <checker v-model="ruleForm.state" default-item-class="ckecker-item"
                             selected-item-class="active">
                        <checker-item :value="item" v-for="(item, index) in stateList" :key="index">
                            <!--                            {{item.value}}-->
                            <template v-if="item.value=='进'">
                                <el-image src="../../static/images/intUn.png" fit="contain"
                                          v-show="ruleForm.state.key!=item.key"></el-image>
                                <el-image src="../../static/images/intC.png" fit="contain"
                                          v-show="ruleForm.state.key==item.key"></el-image>
                            </template>
                            <template v-else>
                                <el-image src="../../static/images/outUn.png" fit="contain"
                                          v-show="ruleForm.state.key!=item.key"></el-image>
                                <el-image src="../../static/images/outC.png" fit="contain"
                                          v-show="ruleForm.state.key==item.key"></el-image>
                            </template>
                        </checker-item>
                    </checker>
                </el-form-item>
                <el-form-item label="体温状况" prop="temperature">
                    <!--                    <group class="form-group">-->
                    <!--                        <checklist :options="temperatureList" v-model="ruleForm.temperature" class="checklist"-->
                    <!--                                   :max="1" @on-change="temperatureChange()"></checklist>-->
                    <!--                    </group>-->
                    <checker v-model="ruleForm.temperature" default-item-class="ckecker-item"
                             selected-item-class="active">
                        <checker-item :value="item" v-for="(item, index) in temperatureList" :key="index">
                            <!--                            {{item.value}}-->
                            <template v-if="item.value=='正常'">
                                <el-image src="../../static/images/nomalUn.png" fit="contain"
                                          v-show="ruleForm.temperature.key!=item.key"></el-image>
                                <el-image src="../../static/images/nomalC.png" fit="contain"
                                          v-show="ruleForm.temperature.key==item.key"></el-image>
                            </template>
                            <template v-else>
                                <el-image src="../../static/images/hotUn.png" fit="contain"
                                          v-show="ruleForm.temperature.key!=item.key"></el-image>
                                <el-image src="../../static/images/hotC.png" fit="contain"
                                          v-show="ruleForm.temperature.key==item.key"></el-image>
                            </template>
                        </checker-item>
                    </checker>
                </el-form-item>
                <el-form-item label="温度(℃)" prop="degree" class="degree">
                    <div @click="showPopupPicker = true"><span v-if="!ruleForm.degree[0]" class="placeholder">请选择</span><span>{{ruleForm.degree[0]}}</span><i
                        class="el-icon-arrow-right"></i></div>
                    <div></div>
                    <popup-picker title="" :data="degreeData" v-model="ruleForm.degree"
                                  :placeholder="'请选择'" :show.sync="showPopupPicker" v-show="false"></popup-picker>
                </el-form-item>
                <group>

                </group>
            </el-form>
            <el-button type="primary" @click="submitForm()" class="submit">登记</el-button>
        </div>
        <router-view v-else :idCardImg="result.idCardImg"></router-view>
        <alert v-model="result.appointmentToday" class="appointment" v-if="result&&result.appointmentToday">
            <div>该用户预约的不是今天</div>
            <div>他预约的时间是：</div>
            <div>{{result.appointmentTime || ''}}</div>
        </alert>
    </div>
</template>

<script>
    import {Group, Checklist, Selector, PopupPicker, Alert, Swiper, SwiperItem, Checker, CheckerItem} from 'vux'

    export default {
        data() {
            return {
                result: {
                    name: '',
                    idType: '',
                    cardId: '',
                    idCardImg: [],
                    phone: '',
                    address: '',
                    type: '',
                    degree: '',
                    familyMember: [],
                    appointmentTime: '',
                    appointmentToday: false,
                    recordCount: 0 // 扫码记录次数
                },
                degreeData: [[
                    '35', '35.1', '35.2', '35.3', '35.4', '35.5', '35.6', '35.7', '35.8', '35.9',
                    '36', '36.1', '36.2', '36.3', '36.4', '36.5', '36.6', '36.7', '36.8', '36.9',
                    '37', '37.1', '37.2', '37.3', '37.4', '37.5', '37.6', '37.7', '37.8', '37.9',
                    '38', '38.1', '38.2', '38.3', '38.4', '38.5', '38.6', '38.7', '38.8', '38.9',
                    '39', '39.1', '39.2', '39.3', '39.4', '39.5', '39.6', '39.7', '39.8', '39.9', '40']],
                tk: '',
                ruleForm: {
                    state: '',
                    temperature: '',
                    degree: []
                },
                rules: {
                    state: [
                        {required: true, message: '请选择出入状态', trigger: 'change'}
                    ],
                    temperature: [
                        {required: true, message: '请选择体温状况', trigger: 'change'}
                    ],
                    degree: [
                        {required: true, message: '请选择温度', trigger: 'change'}
                    ]
                },
                stateList: [
                    {key: '1', value: '进'},
                    {key: '2', value: '出'}
                ],
                temperatureList: [
                    {key: '1', value: '正常'},
                    {key: '2', value: '发热'}
                ],
                showPopupPicker: false
            }
        },
        mounted() {
            if (this.$route.query.qrresult) this.tk = this.$route.query.qrresult
            this.init()
        },
        methods: {
            init() {
                this.$vux.loading.show()
                this.$http.post('/recorder/recordInfo?tk=' + this.tk).then(result => {
                    if (result.success && result.data) {
                        this.result = {
                            name: result.data.name,
                            idType: '身份证',
                            cardId: result.data.cardId,
                            idCardImg: result.data.idCardImg,
                            phone: result.data.phone,
                            address: result.data.addrLocal,
                            type: result.data.type,
                            recordCount: result.data.recordCount,
                            familyMember: result.data.familyMember,
                            appointmentTime: result.data.appointmentTime,
                            appointmentToday: !result.data.appointmentToday
                        }
                        this.$vux.loading.hide()
                    }
                })
            },
            accompany() {
                this.$router.push({
                    path: this.$route.path + '/accompany',
                    query: {
                        tk: this.tk,
                        type: this.result.type
                    }
                })
            },
            stateChange(val, label) {

            },
            temperatureChange(val, label) {

            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        this.$vux.toast.text('请完善登记信息', 'middle')
                        return false
                    }
                })
            },
            submitForm(formName) {
                this.validate('ruleForm', () => {
                    this.$http.post('/recorder/takeRecord?tk=' + this.tk, {
                        action: this.ruleForm.state.key, // 进出
                        healthStatus: this.ruleForm.temperature.key, // 健康状态
                        remark: this.ruleForm.degree[0],
                        recordAddr: '', // 记录地点
                        strategy: 1 // 执行策略
                    }).then(result => {
                        if (result.success) {
                            this.$vux.alert.show({
                                content: '登记成功',
                                onShow() {
                                },
                                onHide() {
                                    history.back()
                                }
                            })
                        }
                    })
                })
            },
            lookCardId() {
                // this.$router.push('/sweepCodeCheck/lookCardId?qrresult=' + this.tk)
                this.$router.push({
                    path: '/sweepCodeCheck/lookCardId',
                    query: {
                        qrresult: this.tk
                    }
                })
            },
            loadImage() {
                this.$nextTick(() => {
                    this.$previewRefresh()
                })
            }
        },
        components: {
            Group,
            Checklist,
            Selector,
            PopupPicker,
            Alert,
            Swiper,
            SwiperItem,
            Checker,
            CheckerItem
        }
    }
</script>

<style scoped lang="less">
    .auditBox {
        height: 100%;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #fff;
        padding-bottom: .9rem;

        .info {
            background-color: #4078ff;
            padding-top: .5rem;

            .name {
                font-size: .36rem;
                line-height: .48rem;
                text-align: center;
                margin-bottom: .5rem;
                position: relative;
                color: #fff;

                .nameList {
                    position: absolute;
                    top: 0;
                    right: .4rem;

                    em {
                        color: #fff;
                        border-radius: .2rem;
                        font-size: .24rem;
                        display: inline-block;
                        vertical-align: top;
                        padding: 0 .25rem;
                        line-height: .4rem;
                        height: .4rem;
                        margin-top: .04rem;
                    }

                    .patients {
                        background-color: #FF6464;
                    }

                    .family {
                        background-color: #FFC565;
                    }

                    .staff {
                        background-color: #658CFF;
                    }
                }
            }

            li {
                color: #fff;
                min-height: .6rem;
                line-height: .48rem;
                padding: 0 .2rem 0 .3rem;
                margin-bottom: .1rem;

                div {
                    text-align: left;
                    overflow: hidden;

                    &:nth-child(1) {
                        float: left;
                        width: 1.6rem;
                    }

                    &:nth-child(2) {
                        position: relative;
                        margin-left: 1.6rem;
                    }
                }

                &:last-child {
                    margin-bottom: 0;
                }

                &.accompany {
                    height: .68rem;
                    line-height: .68rem;
                    background-color: #598aff;

                    .num {
                        text-align: right;

                        i {
                            display: inline-block;
                            margin-left: .05rem;
                        }
                    }
                }
            }

            &.big {
                padding-bottom: .2rem;
            }
        }

        .title {
            line-height: .76rem;
            padding: 0 .2rem;
            color: #999;
            background-color: #f4f4f4;

            &.mt {
                margin-top: -.15rem;
            }
        }

        .swiper {
            height: 4rem;

            .el-image {
                width: 100%;
                height: 100%;
            }
        }

        .textColor {
            /deep/ .vux-cell-value {
                color: #000;
            }
        }

        .appointment {
            div {
                margin-left: .8rem;
                text-align: left;

                &:nth-child(1) {
                    margin-bottom: .3rem;
                    color: #222;
                }

                &:nth-child(3) {
                    margin-top: .2rem;
                    color: #222;
                }
            }
        }

        /deep/ .form {
            border-top: 1px solid #eee;

            .el-form-item {
                position: relative;
                font-size: .28rem;
                background-color: #fff;
                margin-bottom: .15rem;
                padding: .1rem 0;

                .vux-cell-box {
                    position: absolute;
                    right: 0;
                    top: -.75rem;
                    width: 100%;
                }

                .el-form-item__label {
                    color: #333;
                    padding: 0 0 0 .3rem;
                    font-size: .28rem;
                    line-height: .48rem;
                    margin-bottom: .1rem;
                }

                .el-form-item__content {
                    font-size: .28rem;
                    line-height: .48rem;
                    padding: .1rem .3rem;
                }

                .weui-cells_checkbox {
                    .weui-icon-checked {
                        &:before {
                            font-size: .34rem;
                        }
                    }

                    .weui-check:checked + .vux-checklist-icon-checked {
                        &:before {
                            color: #409EFF;
                        }
                    }
                }

                .el-button {
                    font-size: .28rem;
                }

                .form-group {
                    .weui-cells {
                        &:before, &:after {
                            border: 0 none;
                        }

                        margin-top: 0;
                        font-size: .28rem;

                        .weui-cell {
                            padding: .15rem .2rem;

                            &:before {
                                border: 0 none;
                            }
                        }

                        .vux-cell-value {
                            color: inherit;
                        }
                    }
                }

                &.form-item-top {
                    margin-top: -.2rem;
                    border-top: 1px solid #eee;
                }

                .vux-checker-box {
                    .ckecker-item {
                        width: 1.6rem;
                        /*background-color: #eee;*/
                        margin-right: .6rem;
                        height: .8rem;
                        line-height: .8rem;
                        text-align: center;
                        border-radius: .03rem;

                        .el-image {
                            width: 100%;
                            height: 100%;
                        }

                        &:hover, &:active {
                            background-color: transparent;
                        }
                    }
                }

                &.degree {
                    .el-form-item__label {
                        margin-bottom: 0;
                        float: left;
                        /*line-height: .48rem;*/
                        padding: .1rem .3rem;
                    }

                    .el-form-item__content {
                        height: .68rem;
                        text-align: right;

                        .placeholder {
                            color: #999;
                        }
                    }
                }
            }
        }

        .submit {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: .88rem;
            border-radius: 0;
            z-index: 100;
        }
    }

</style>
